<template>
	<view class="container">
		<!-- 筛选标签 -->
		<view class="tabs">
			<view class="tabs-content">
				<view v-for="(item, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
					@tap="handleTabClick(index)">
					{{ item }}
				</view>
			</view>
		</view>
		
		<!-- 维修通知列表 -->
		<scroll-view class="notice-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh"
			:refresher-enabled="true" :refresher-triggered="isRefreshing">
			<view v-if="filteredNotices.length > 0">
				<view v-for="(item, index) in filteredNotices" :key="index" :class="['notice-item', 'notice-item-' + item.id]" @click="goToDetail(item.id)">
					<!-- 优先级标识 -->
					<view v-if="item.priority === 'high'" class="priority-badge high">紧急</view>
					<view v-else-if="item.priority === 'medium'" class="priority-badge medium">重要</view>
					
					<view class="notice-wrap">
						<image class="notice-image" :src="item.image" mode="aspectFill" />
						<view class="notice-content">
							<!--标题-->
							<text class="notice-title">{{ item.title }}</text>
							<text class="notice-desc">{{ item.description }}</text>
							<!--时间-->
							<text class="notice-time">{{ item.time }}</text>
						</view>
					</view>
				</view>
				
				<view class="load-more" v-if="hasMore">加载中...</view>
				<view class="load-all" v-else>已经到底啦</view>
			</view>
			
			<!-- 空状态 -->
			<view v-else class="empty-state">
				<image class="empty-image"  mode="aspectFit" />
				<text class="empty-text">暂无维修通知</text>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed ,onMounted} from 'vue';
	
	const app = getApp();
	
	const tabs = ref(['全部', '工作规范', '重要活动', '安全应急']);
	const currentTab = ref(0);
	const isRefreshing = ref(false);
	const hasMore = ref(true);
	
	const maintenanceNotices = ref([
		{
			id: 1,
			title: '水电设施运行良好，维修及时。',
			category: '工作规范',
			description: '水电设施运行正常，无跑冒滴漏现象，水电维修及时响应，一般故障 24 小时内修复，重大故障及时采取应急措施并尽快恢复。',
			time: '2025-07-08',
			priority: 'low',
			image: '/static/air-conditioning.png',
		},
		{
			id: 2,
			title: '25号运动会，提前布置保证安全。',
			category: '重要活动',
			description: '本月25号至27号，学校将举办运动会，需提前做好活动场地的布置、清洁及设施设备维护工作，确保活动顺利进行。',
			time: '2025-07-15',
			priority: 'medium',
			image: '/static/waterpipe.png',
		},
		{
			id: 3,
			title: '防暑防火，禁用电器，查修消防。',
			category: '安全应急',
			description: '近期天气炎热，提醒师生注意防火安全，严禁在校园内违规使用电器；要加强校园内消防设施设备的检查维护，确保正常使用。',
			time: '2025-07-10',
			priority: 'high',
			image: '/static/elevator.png',
		}
	]);
	
	const filteredNotices = computed(() => {
		if (currentTab.value === 0) {
			return maintenanceNotices.value;
		}
		const categoryMap = ['', '工作规范', '重要活动', '安全应急'];
		return maintenanceNotices.value.filter(notice => notice.category === categoryMap[currentTab.value]);
	});
	
	const handleTabClick = (index: number) => {
		currentTab.value = index;
	};
	
	const refresh = () => {
		isRefreshing.value = true;
		setTimeout(() => {
			isRefreshing.value = false;
		}, 1000);
	};
	
	const loadMore = () => {
		if (!hasMore.value) return;
		// 模拟加载更多数据
		setTimeout(() => {
			hasMore.value = false;
		}, 1000);
	};
	
	const goToDetail = (id: number) => {
		uni.navigateTo({
			url: `/pages/index/notice/detail?id=${id}`
		});
	};
	
	const getAllNotice = ()=>{
		const baseUrl = app.globalData.baseUrl;
		const header1 = app.globalData.zuZhuId;
			uni.request({
			    url: encodeURI(baseUrl + '/notice/getAllNotice'),
				method:'POST',
			    data: {
			    },
			    header:{
					"X-Tenant-Id": header1
				},
			    success: (res) => {
					console.log(res.data)
					maintenanceNotices.value = res.data.data
			    }
			});
	
		}
	
	onMounted(()=>{
		getAllNotice();
	})
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background: #EFEFEF;
		height: 100vh;
	}
	
	/*筛选标签*/
	.tabs {
		background: #fff;
	}
	
	.tabs-content {
		display: flex;
		padding: 0 24rpx;
		justify-content: space-around;
	}
	
	.tab-item {
		text-align: center;
		padding: 24rpx 0;
		font-size: 32rpx;
		color: #4F4F4F;    
		position: relative;
	}
	
	.tab-item.active {
		color: #007aff;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 48rpx;
		height: 4rpx;
		background: #007aff;
		border-radius: 2rpx;
		margin-top: 8rpx;
	}
	
	/*物业公告列表*/
	.notice-list {
		flex: 1;
		overflow: auto;
	}
	
	.notice-item {
		margin: 20rpx 24rpx 0;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.priority-badge {
		position: absolute;
		top: 0;
		left: 0;
		padding: 7rpx 14rpx;
		color: #FFFFFF;
		font-size: 21rpx;
		border-radius: 0 0 16rpx 0;
		z-index: 1;
	}
	
	.priority-badge.high {
		background-color: #ff4d4f;
	}
	
	.priority-badge.medium {
		background-color: #faad14;
	}
	
	.notice-wrap {
		display: flex;
		padding: 27rpx;
	}
	
	.notice-image {
		width: 300rpx;
		height: 210rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}
	
	.notice-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.notice-title {
		font-size: 38rpx;
		color: #000;
		line-height: 1.4;
		font-weight: bold;
		margin-bottom: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 320rpx;
	}
	
	.notice-desc {
		font-size: 28rpx;
		color: #696969;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: auto;
	}
	
	.notice-time {
		font-size: 25rpx;
		color: #BEBEBE;
		margin-top: 8rpx;
		align-self: flex-end;
	}
	
	.load-more,
	.load-all {
		text-align: center;
		padding: 24rpx 0;
		color: #999999;
		font-size: 24rpx;
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 160rpx;
	}
	
	.empty-image {
		width: 400rpx;
		height: 400rpx;
	}
	
	.empty-text {
		margin-top: 32rpx;
		font-size: 28rpx;
		color: #999999;
	}
	
	.create-btn {
		margin-top: 32rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(135deg, #FF6B35, #FF8E53);
		color: #FFFFFF;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	
	.status-completed {
		background-color: #7ED321;
	}
</style>